<template>
  <div v-show="type == 'column'" id="___antv1"></div>
  <div v-show="type == 'line'" id="___antv2"></div>
</template>

<script setup>
  import {nextTick, defineProps} from 'vue'
  import {Column, Line} from '@antv/g2plot'

  const props = defineProps({
    type: {
      type: String,
      default: 'column',
    },
  })

  nextTick(() => {
    const data1 = [
      {name: '供水量', month: '1月', value: 18.9},
      {name: '供水量', month: '2月', value: 28.8},
      {name: '供水量', month: '3月', value: 39.3},
      {name: '供水量', month: '4月', value: 81.4},
      {name: '供水量', month: '5月', value: 47},
      {name: '供水量', month: '6月', value: 20.3},
      {name: '供水量', month: '7月', value: 24},
      {name: '供水量', month: '8月', value: 35.6},
      {name: '供水量', month: '9月', value: 18.9},
      {name: '供水量', month: '10月', value: 28.8},
      {name: '供水量', month: '11月', value: 39.3},
      {name: '供水量', month: '12月', value: 81.4},
      {name: '售水量', month: '1月', value: 12.4},
      {name: '售水量', month: '2月', value: 23.2},
      {name: '售水量', month: '3月', value: 34.5},
      {name: '售水量', month: '4月', value: 99.7},
      {name: '售水量', month: '5月', value: 52.6},
      {name: '售水量', month: '6月', value: 35.5},
      {name: '售水量', month: '7月', value: 37.4},
      {name: '售水量', month: '8月', value: 42.4},
      {name: '售水量', month: '9月', value: 18.9},
      {name: '售水量', month: '10月', value: 28.8},
      {name: '售水量', month: '11月', value: 39.3},
      {name: '售水量', month: '12月', value: 81.4},
    ]

    const columnPlot = new Column('___antv1', {
      data: data1,
      height: 200,
      padding: [45, 0, 20, 30],
      xField: 'month',
      yField: 'value',
      seriesField: 'name',
      isGroup: true,
      color: ['#ACD8F9', '#C3A170'],
      xField: 'month',
      yField: 'value',
      dodgePadding: 2,
      legend: {
        position: 'top-right',
        itemName: {
          style: {
            fill: '#fff',
          },
        },
      },
      xAxis: {
        label: {
          style: {
            fill: '#fff',
          },
        },
        grid: {
          line: false,
        },
      },
      yAxis: {
        label: {
          style: {
            fill: '#fff',
          },
        },
        tickLine: {
          style: {
            fill: '#fff',
          },
        },
        line: {
          style: {
            fill: '#fff',
          },
        },
        grid: {
          line: false,
        },
      },
    })

    columnPlot.render()

    const data2 = [
      {time: '2', value: 3},
      {time: '4', value: 4},
      {time: '6', value: 3.5},
      {time: '8', value: 5},
      {time: '10', value: 4.9},
      {time: '12', value: 6},
      {time: '14', value: 7},
      {time: '16', value: 9},
      {time: '18', value: 13},
      {time: '30', value: 8},
    ]
    const linePlot = new Line('___antv2', {
      data: data2,
      height: 200,
      padding: 'auto',
      color: '#ACD8F9',
      xField: 'time',
      yField: 'value',
      xAxis: {
        tickCount: 5,
        label: {
          style: {
            fill: '#fff',
          },
        },
      },
      yAxis: {
        label: {
          style: {
            fill: '#fff',
          },
        },
      },
      smooth: true,
    })

    linePlot.render()
  })
</script>
